<template>
  <div class="toolBar">
    <div class="toolBar-toolData" :style="themeStyle">
      <div
        class="toolBar-toolItem"
        :style="activeMode == toolItem.value ? ' background: #4380ea' : ''"
        v-for="toolItem in toolData"
        :key="toolItem.value"
        @click="handleActiveMode(toolItem.value)"
      >
        <span
          class="toolBar-toolItem-name"
          :style="{
            color:
              activeMode == toolItem.value ? '#4380ea' : themeModeStyle.color,
          }"
          >{{ findName(toolItem.value)?.label }}</span>
        <IconFont
          v-if="toolItem.value !== 7"
          :iconType="toolItem.icon"
          :style="activeMode == toolItem.value ? activeStyle : style"/>
        <img
          v-if="toolItem.value == 7 && activeMode !== toolItem.value"
          :src="fuzhaoduSvg"
        />
        <img
          v-if="toolItem.value == 7 && activeMode == toolItem.value"
          :src="fuzhaoduSelectSvg"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
// import BaseMapLayer from '/@/components/MapLayer/BaseMapLayer';
import { modeList } from "./data";
import IconFont from "@/components/IconFont";
import { activeIconColor, iconColor } from "../constants";
import fuzhaoduSvg from "@/assets/icons/fuzhaodu.svg";
import fuzhaoduSelectSvg from "@/assets/icons/fuzhaoduSelect.svg";
import { themeStyle, themeModeStyle } from "../constants";

const emit = defineEmits(["changeMode", "changeFullScreen"]);

// let style = { color: iconColor, fontSize: '16px' };
// let activeStyle = { color: activeIconColor, fontSize: '16px' };

let toolData = ref([
  { icon: `icon-qiwen`, value: 8 },

  // { icon: `icon-a-xingzhuang14`, value: 1 },
  // {
  //   icon: `icon-a-xingzhuang10`,
  //   value: 2,
  // },
  // { icon:  `dimianqiya`, value: 3 },
  { icon: `icon-a-xingzhuang9`, value: 4 },
  { icon: `icon-a-xingzhuang11`, value: 5 },
  // { icon: `icon-a-lujing4`, value: 6 },
  { icon: `icon-fushedu`, value: 7 },
  // {
  //   icon: `icon-a-10mdongxifengxiang`,
  //   value: 9,
  // },
  // {
  //   icon: `icon-a-100mdongxifengxiang`,
  //   value: 10,
  // },
  // {
  //   icon: `icon-a-10mnanbeifengxiang`,
  //   value: 11,
  // },
  // {
  //   icon: `icon-a-100mnanbeifengxiang`,
  //   value: 12,
  //   activeIcon: `100mnanbeifengxiang-1`,
  // },
  { icon: `icon-a-xingzhuang15`, value: 13 },
  { icon: `icon-fengxiang`, value: 14 },
  { icon: `icon-fengxiangbeifen`, value: 15 },
]);

let activeMode = ref(toolData.value[0].value);

const handleActiveMode = (value) => {
  activeMode.value = value;
  emit("changeMode", value);
};

const findName = (v) => modeList.find((val) => val.value == v);
</script>
<style lang="less" scoped>
.toolBar {
  position: absolute;
  right: 24px;
  // top: 96px;
  top: 24px;

  .toolBar-toolData {
    padding: 8px 0px;

    align-items: center;
    justify-content: space-between;
    width: 48px;
    // height: 246px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0px -2px 24px 0px rgba(160, 165, 186, 0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    .toolBar-toolItem {
      cursor: pointer;
      width: 32px;
      height: 32px;
      box-shadow: 0px -2px 24px 0px rgba(160, 165, 186, 0.08);
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .toolBar-toolItem-name {
        position: absolute;
        right: 50px;
        width: 120px;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #757b8c;
        line-height: 21px;
        text-align: end;
        background: transparent;
      }
    }

    & :hover {
      background: #4380ea;
    }
  }

  .toolBar-toolExtraData {
    padding: 8px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 48px;
    height: 129px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0px -2px 24px 0px rgba(160, 165, 186, 0.08);
    border-radius: 8px;
    flex-direction: column;
    margin-top: 24px;

    .toolBar-toolExtraItem {
      cursor: pointer;
      width: 32px;
      height: 32px;
      box-shadow: 0px -2px 24px 0px rgba(160, 165, 186, 0.08);
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    & :hover {
      background: #4380ea;
    }
  }
}
</style>
